<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<script type="text/javascript">
	function addNew(id) {
		window.location = "${ctx }/menu/create";
	}
	$().ready(function(){
		$.fn.extend({
		    moveRow: function (oldPosition, newPosition) {
		        return this.each(function () {
		            var row = $(this).find('tr').eq(oldPosition).detach();
		            if (newPosition == $(this).find('tr').length) {
		                $(this).find('tr').eq(newPosition - 1).after(row);
		            }
		            else {
		                $(this).find('tr').eq(newPosition).before(row);
		            }
		        });
		    }
		});

	});
	function moveRow(oldPosition,newPosition){
		var rowCount = $('#listTable').find("tr").size()-1;//exclude thead
		if(newPosition ==-1){
			newPosition = rowCount-1;
		}else if(newPosition == rowCount){
			newPosition = 0;
		}
		
		$('#listTable').moveRow(oldPosition+1, newPosition+1);
		
		var data = {};
		$('#listTable').find("tr:gt(0)").each(function(index,tr){
		    var menuId = parseInt($(tr).find("td:first").text());
		    var menuOrder = index;
		    data[menuId] = menuOrder;
		});
		$.ajax({
			async: false,
			type: "POST",
			url: "menu/moveRow",
			data: data,
			success: function(msg){
				window.location.reload();
			}
		});
	}
</script>
<c:if test="${not empty message}">
	<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
</c:if>
<div class="row-fluid">
	<div class="span12">
		<h3>
			Menu列表
			<span class="pull-right">
				<form id="searchForm" class="form-search" action="#">
					<input type="hidden" id="pageIndex" name="pageIndex" value="1"> 
					name： <input type="text" name="filter_LIKES_name" class="input-medium" value="${param.filter_LIKES_name}">
					
					<input type="submit" class="btn" value="Search"> 
					<input type="button" class="btn" value="Add New" onclick="addNew()">
				</form>
			</span>
		</h3>
		<form name="listForm" id="listForm" method="post">
			<table id="listTable" class="table table-bordered table-hover">
				<thead>
					<tr>
				    <th>ID</th>
				    <th>层级</th>
				    <th>菜单名称</th>
				    <th>顺序</th>
				    <th>URL</th>
				    <th>上级菜单</th>
					<th>&nbsp;</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${page.content }" var="o" varStatus="s">
						<tr>
							<td>${o.id}</td>
							<td>${o.level}</td>
							<td>${o.name}</td>
							<td>${o.menuOrder}</td>
							<td>${o.url}</td>
							<td>${o.pid}</td>
							<td>
								&nbsp; <a href="javascript:void(0)" onclick="moveRow(${s.index},${s.index-1 })">上移</a>
								&nbsp; <a href="javascript:void(0)" onclick="moveRow(${s.index},${s.index+1 })">下移</a>
								&nbsp; <a href="${ctx}/menu/${o.id}">Show</a>
								&nbsp; <a href="${ctx}/menu/update/${o.id}">Edit</a>
								&nbsp; <a href="${ctx}/menu/delete/${o.id}">Delete</a>
								&nbsp;</td>
						</tr>
					</c:forEach>
				</tbody>
			</table>
		</form>
	</div>
</div>

<!-- Pagination -->
<div class="row-fluid">
    <div class="span12">
    	<tags:pagination page="${page}" paginationSize="5"/>
  	</div>
</div>
